<template>
	<view class="service-container">
		<view class="service-header">
			<text class="service-title">客服中心</text>
		</view>
		
		<!-- 联系客服模块 -->
		<view class="service-card">
			<view class="service-card-title">联系客服</view>
			<view class="service-contact-info">
				<view class="contact-method">
					<view class="contact-icon">📞</view>
					<view class="contact-detail">
						<text class="contact-label">客服热线</text>
						<text class="contact-value">400-123-4567</text>
						<text class="contact-desc">工作时间: 9:00-22:00</text>
					</view>
					<button class="contact-btn" @click="callService">拨打</button>
				</view>
				
				<view class="contact-method">
					<view class="contact-icon">💬</view>
					<view class="contact-detail">
						<text class="contact-label">在线客服</text>
						<text class="contact-value">点击开始会话</text>
						<text class="contact-desc">24小时在线</text>
					</view>
					<button class="contact-btn" @click="openOnlineService">咨询</button>
				</view>
				
				<view class="contact-method">
					<view class="contact-icon">✉️</view>
					<view class="contact-detail">
						<text class="contact-label">客服邮箱</text>
						<text class="contact-value">service@wsnackshop.com</text>
						<text class="contact-desc">48小时内回复</text>
					</view>
					<button class="contact-btn" @click="sendEmail">发送</button>
				</view>
			</view>
		</view>
		
		<!-- 常见问题 -->
		<view class="service-card">
			<view class="service-card-title">常见问题</view>
			<view class="faq-list">
				<view 
					class="faq-item" 
					v-for="(item, index) in faqList" 
					:key="index"
					@click="toggleFaq(index)"
				>
					<view class="faq-question">
						<text>{{ item.question }}</text>
						<text class="faq-arrow" :class="{ 'expanded': item.expanded }">{{ item.expanded ? '▼' : '▶' }}</text>
					</view>
					<view class="faq-answer" v-if="item.expanded">
						{{ item.answer }}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 问题反馈 -->
		<view class="service-card">
			<view class="service-card-title">问题反馈</view>
			<view class="feedback-form">
				<view class="feedback-type">
					<text class="feedback-label">问题类型</text>
					<view class="feedback-type-options">
						<view 
							class="type-option" 
							v-for="(type, index) in feedbackTypes" 
							:key="index"
							:class="{ 'selected': selectedType === index }"
							@click="selectType(index)"
						>
							{{ type }}
						</view>
					</view>
				</view>
				
				<view class="feedback-content">
					<text class="feedback-label">问题描述</text>
					<textarea 
						class="feedback-textarea" 
						v-model="feedbackContent" 
						placeholder="请详细描述您遇到的问题或建议..."
						maxlength="500"
					></textarea>
					<text class="feedback-counter">{{ feedbackContent.length }}/500</text>
				</view>
				
				<view class="feedback-contact">
					<text class="feedback-label">联系方式 (选填)</text>
					<input 
						class="feedback-input" 
						v-model="contactInfo" 
						placeholder="您的手机号或邮箱"
					/>
				</view>
				
				<button class="submit-btn" @click="submitFeedback">提交反馈</button>
			</view>
		</view>
		
		<!-- 常用自助服务 -->
		<view class="service-card">
			<view class="service-card-title">自助服务</view>
			<view class="self-service-grid">
				<view class="self-service-item" @click="goToOrders">
					<view class="self-service-icon">📦</view>
					<text class="self-service-text">订单查询</text>
				</view>
				<view class="self-service-item" @click="goToRefund">
					<view class="self-service-icon">💰</view>
					<text class="self-service-text">退款/售后</text>
				</view>
				<view class="self-service-item" @click="goToAddress">
					<view class="self-service-icon">📍</view>
					<text class="self-service-text">收货地址</text>
				</view>
				<view class="self-service-item" @click="goToInvoice">
					<view class="self-service-icon">📃</view>
					<text class="self-service-text">发票信息</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import common from '@/utils/common.js';
	
	// 响应式数据
	const faqList = ref([
		{
			question: '如何修改收货地址？',
			answer: '您可以进入"个人中心"→"收货地址"→选择需要修改的地址点击编辑，或者在下单时选择/添加新的收货地址。',
			expanded: false
		},
		{
			question: '下单后多久可以收到商品？',
			answer: '我们承诺在确认订单后48小时内发货，具体到货时间取决于您的收货地址和物流状况，一般3-5天内可送达。',
			expanded: false
		},
		{
			question: '如何申请退款？',
			answer: '您可以在"我的订单"中找到需要退款的订单，点击"申请退款"按钮，填写退款原因后提交申请。我们会在48小时内处理您的退款请求。',
			expanded: false
		},
		{
			question: '优惠券使用有什么限制？',
			answer: '优惠券使用有最低消费金额限制，部分优惠券不能与其他促销活动同时使用，具体以优惠券说明为准。优惠券有效期过后将自动失效。',
			expanded: false
		},
		{
			question: '如何查看物流信息？',
			answer: '您可以在"我的订单"中找到已发货的订单，点击"查看物流"按钮即可查看物流跟踪信息。',
			expanded: false
		}
	]);
	
	const feedbackTypes = ref(['功能建议', '商品相关', '物流配送', '促销活动', '系统故障', '其他问题']);
	const selectedType = ref(0);
	const feedbackContent = ref('');
	const contactInfo = ref('');
	
	// 切换FAQ展开状态
	const toggleFaq = (index) => {
		faqList.value[index].expanded = !faqList.value[index].expanded;
	};
	
	// 选择反馈类型
	const selectType = (index) => {
		selectedType.value = index;
	};
	
	// 提交反馈
	const submitFeedback = () => {
		if (!feedbackContent.value.trim()) {
			common.showToast('请输入问题描述');
			return;
		}
		
		// 模拟提交反馈
		uni.showLoading({
			title: '提交中...'
		});
		
		setTimeout(() => {
			uni.hideLoading();
			common.showSuccess('提交成功');
			// 重置表单
			selectedType.value = 0;
			feedbackContent.value = '';
			contactInfo.value = '';
		}, 1500);
	};
	
	// 拨打客服电话
	const callService = () => {
		uni.makePhoneCall({
			phoneNumber: '4001234567',
			fail: () => {
				common.showToast('拨号失败，请手动拨打400-123-4567');
			}
		});
	};
	
	// 打开在线客服
	const openOnlineService = () => {
		// 模拟打开在线客服
		common.showToast('正在接入在线客服...');
	};
	
	// 发送邮件
	const sendEmail = () => {
		// 模拟发送邮件
		common.showToast('正在打开邮箱应用...');
	};
	
	// 跳转页面
	const goToOrders = () => {
		uni.navigateTo({
			url: '/pages/order/list'
		});
	};
	
	const goToRefund = () => {
		common.showToast('售后功能正在开发中');
	};
	
	const goToAddress = () => {
		uni.navigateTo({
			url: '/pages/address/list'
		});
	};
	
	const goToInvoice = () => {
		common.showToast('发票功能正在开发中');
	};
</script>

<style scoped>
	.service-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 40rpx;
	}
	
	.service-header {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 60rpx 40rpx 40rpx;
		color: #fff;
	}
	
	.service-title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.service-card {
		background: #fff;
		border-radius: 12rpx;
		margin: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.service-card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		border-left: 8rpx solid #667eea;
		padding-left: 20rpx;
	}
	
	/* 联系客服样式 */
	.service-contact-info {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}
	
	.contact-method {
		display: flex;
		align-items: center;
		background: #f9f9f9;
		border-radius: 10rpx;
		padding: 20rpx;
	}
	
	.contact-icon {
		font-size: 40rpx;
		margin-right: 20rpx;
		width: 60rpx;
		text-align: center;
	}
	
	.contact-detail {
		flex: 1;
	}
	
	.contact-label {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 6rpx;
	}
	
	.contact-value {
		font-size: 26rpx;
		color: #666;
		display: block;
		margin-bottom: 6rpx;
	}
	
	.contact-desc {
		font-size: 22rpx;
		color: #999;
	}
	
	.contact-btn {
		background: #667eea;
		color: #fff;
		font-size: 24rpx;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		margin: 0;
		line-height: 1.5;
		height: auto;
	}
	
	/* FAQ样式 */
	.faq-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.faq-item {
		background: #f9f9f9;
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.faq-question {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 20rpx;
		font-size: 28rpx;
		color: #333;
	}
	
	.faq-arrow {
		font-size: 20rpx;
		color: #999;
		transition: all 0.3s;
	}
	
	.faq-arrow.expanded {
		transform: rotate(180deg);
	}
	
	.faq-answer {
		padding: 0 20rpx 25rpx;
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
	}
	
	/* 问题反馈样式 */
	.feedback-form {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}
	
	.feedback-label {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 15rpx;
	}
	
	.feedback-type-options {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}
	
	.type-option {
		padding: 15rpx 25rpx;
		font-size: 24rpx;
		background: #f0f0f0;
		color: #666;
		border-radius: 30rpx;
		text-align: center;
	}
	
	.type-option.selected {
		background: #667eea;
		color: #fff;
	}
	
	.feedback-textarea {
		width: 100%;
		height: 250rpx;
		background: #f9f9f9;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}
	
	.feedback-counter {
		font-size: 22rpx;
		color: #999;
		text-align: right;
		margin-top: 10rpx;
	}
	
	.feedback-input {
		width: 100%;
		height: 80rpx;
		background: #f9f9f9;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}
	
	.submit-btn {
		background: #667eea;
		color: #fff;
		border: none;
		border-radius: 10rpx;
		padding: 25rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
	
	/* 自助服务样式 */
	.self-service-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}
	
	.self-service-item {
		width: calc(50% - 10rpx);
		background: #f9f9f9;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.self-service-icon {
		font-size: 40rpx;
		margin-bottom: 15rpx;
	}
	
	.self-service-text {
		font-size: 26rpx;
		color: #333;
	}
</style> 